

<!DOCTYPE html>
<html>
<head>
<title>validate验证框架演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Page-Enter"
	content="revealTrans(duration=1, transition=2)" />
<meta http-equiv="Page-Exit"
	content="revealTrans(duration=1, transition=2)" />
<link type="text/css" rel="stylesheet"
	href="../js/validate/css/validate.css" />
<script src="./jquery-1.6.4.js" language="javascript"></script>
<script src="../js/validate/talent-validate-all.js"
	language="javascript"></script>
<script src="./demo.js" language="javascript"></script>

<link type="text/css" rel="stylesheet" href="../Styles/SyntaxHighlighter.css" />
	<link type="text/css" rel="stylesheet" href="./demo.css" />
	<script src="../Scripts/shCore.js" type="text/javascript"></script>
	<script src="../Scripts/shBrushJScript.js" type="text/javascript"></script>
	<script src="../Scripts/shBrushJava.js" type="text/javascript"></script>
</head>
<body>
	<form name="form1">


		id1<input type="text" value="id1" name="n1" id='n1_id1'
			style='width: 600px' /><br /> id2<input type="text" value="id2"
			name="n1" id='n1_id2' style='width: 600px' /><br /> <input
			type="button" class='button' value="移动" onclick="movePosition()" />
		<input type="button" class='button' value="复原" onclick="rePosition()" />


	</form>
</body>
<script id="talent_script">
			//获取坐标位置   
			function getpos(e) {
			    var t=e.offsetTop;
			    var l=e.offsetLeft;
			    while(e=e.offsetParent) {
			        t+=e.offsetTop;   
			        l+=e.offsetLeft;
			        
			    }
			    //offsetHeight
			    return {"top":t,'left':l};
			}
			
			//获取坐标位置   
			function getpos_2(e) {
			    var rect = e.getBoundingClientRect();
			    var scrollTop = 0;
			    var scrollLeft = 0;
			    if (document && document.documentElement) {
			    	scrollTop = document.documentElement.scrollTop;
			    	scrollLeft = document.documentElement.scrollLeft;
			    }
			    
			    var t = rect.top + scrollTop;
			    var l = rect.left + scrollLeft;
			    var r = rect.right + scrollLeft;
			    var b = rect.bottom + scrollTop;
			    return {"t":t,'l':l,"b":b,'r':r};
			}
			
			function movePosition(){
				var id1 = document.getElementById("n1_id1");
				var n1postion = getpos_2(id1);
				
				var id2 = document.getElementById("n1_id2");
				id2.style.position = "absolute";
				
				id2.style.top = n1postion.t - 3;
				id2.style.left = n1postion.r - 10;
				
				//id2.style.width = id1.currentStyle.width - 10;
				id2.style.backgroundColor = "#ff0000";
			}
			
			window.onresize = movePosition;
			
			function rePosition(){
				var id2 = document.getElementById("n1_id2");
				id2.style.position = "relative";
				id2.style.top = 0;
				id2.style.left = 0;
			}
			
			
		</script>
</html>
